<div class="system-role-edit">
	<form nz-form [formGroup]="validateForm">

		<nz-form-item>
			<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="roleName">角色名称</nz-form-label>
			<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色名称不能为空!">
				<input nz-input formControlName="roleName" id="roleName" />
			</nz-form-control>
		</nz-form-item>
		<nz-form-item style="margin-bottom: 10px;">
			<nz-form-control [nzSm]="14" [nzXs]="24" [nzOffset]="6">
				<button nz-button style="margin-right: 10px;" (click)="checkAll()">全选</button>
				<button nz-button style="margin-right: 10px;" (click)="checkNoAll()">全不选</button>
				<button nz-button style="margin-right: 10px;" (click)="expand()">全部展开</button>
				<button nz-button style="margin-right: 10px;" (click)="fold()">全部隐藏</button>
			</nz-form-control>
		</nz-form-item>
		<nz-form-item>
			<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="resource">选择权限</nz-form-label>
			<nz-form-control [nzSm]="14" [nzXs]="24">
				<!-- <nz-tree [nzData]="nodes" nzCheckable 
				#nzTreeComponent
				nzShowLine
				[nzCheckedKeys]="checkedKeys"
				(nzCheckBoxChange)="nzCheckBoxChange($event)"
				[nzExpandAll]="nzExpanded">
				</nz-tree> -->
				<nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource">
					<nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
						<nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
						<nz-tree-node-checkbox [nzDisabled]="node.disabled"
							[nzChecked]="checklistSelection.isSelected(node.id)" (nzClick)="leafItemSelectionToggle(node)">
						</nz-tree-node-checkbox>
						<nz-tree-node-option [nzDisabled]="node.disabled" (nzClick)="leafItemSelectionToggle(node)">
							{{ node.name }}
						</nz-tree-node-option>
					</nz-tree-node>

					<nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
						<nz-tree-node-toggle>
							<i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
						</nz-tree-node-toggle>
						<nz-tree-node-checkbox [nzDisabled]="node.disabled" [nzChecked]="descendantsAllSelected(node)"
							[nzIndeterminate]="descendantsPartiallySelected(node)"
							(nzClick)="itemSelectionToggle(node)"></nz-tree-node-checkbox>
						<nz-tree-node-option [nzDisabled]="node.disabled" (nzClick)="itemSelectionToggle(node)">
							{{ node.name }}
						</nz-tree-node-option>
					</nz-tree-node>
				</nz-tree-view>
			</nz-form-control>
		</nz-form-item>
	</form>
</div>